<template>
    <div style="max-width: 960px;margin: 0 auto;">
        <Header></Header>
        <div>
            <el-container>
                <el-header>
                    <h2 style="font-size: large;display: flex;align-items: center;">企业基本信息服务更新服务</h2>
                </el-header>
                <el-main>
                    <el-form style="border-radius: 4px" :model="ruleForm" :rules="rules" ref="ruleForm"
                             class="demo-ruleForm">
                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content bg-purple" style="margin-left: 17px">统一社会信用代码：
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item prop="orgId">
                                    <el-input type="text" placeholder="请输入统一社会信用代码" v-model="ruleForm.orgId"
                                              style="align-items: right;display: inline-block"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>

                            <el-col :span="5">
                                <div class="grid-content bg-purple" style="margin-left: 70px">机构名称：
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item style="" prop="orgName">
                                    <el-input type="text" placeholder="请输入机构名称" v-model="ruleForm.orgName"
                                              style="align-items: right;display: inline-block"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>

                            <el-col :span="5">
                                <div class="grid-content bg-purple" style="margin-left: 60px;">法定代表人：
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item style="" prop="legalName">
                                    <el-input type="text" placeholder="请输入法人" v-model="ruleForm.legalName"
                                              style="align-items: right;display: inline-block"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>

                            <el-col :span="5">
                                <div class="grid-content bg-purple" style="margin-left: 10px">法定代表人证件号：
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item style="" prop="legalIdcard">
                                    <el-input type="text" placeholder="请输入法人证件号" v-model="ruleForm.legalIdcard"
                                              style="align-items: right;display: inline-block"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>

                            <el-col :span="5">
                                <div class="grid-content bg-purple" style="margin-left: 70px;">注册地址：
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item style="" prop="orgAddr">
                                    <el-input type="text" placeholder="请输入注册地址" v-model="ruleForm.orgAddr"
                                              style="align-items: right;display: inline-block"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>

                            <el-col :span="5">
                                <div class="grid-content bg-purple" style="margin-left: 70px">联系方式：
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item style="" prop="mobile">
                                    <el-input type="text" placeholder="请输入联系方式" v-model="ruleForm.mobile"
                                              style="align-items: right;display: inline-block"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>

                            <el-col :span="5">
                                <div class="grid-content bg-purple" style="margin-left: 60px;">联系人姓名：
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item style="" prop="contactName">
                                    <el-input type="text" placeholder="请输入联系人姓名" v-model="ruleForm.contactName"
                                              style="align-items: right;display: inline-block"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>

                            <el-col :span="5">
                                <div class="grid-content bg-purple" style="margin-left: 30px">联系人身份证号：
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item style="" prop="contIdcard">
                                    <el-input type="text" placeholder="请输入联系人身份证号" v-model="ruleForm.contIdcard"
                                              style="align-items: right;display: inline-block"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content bg-purple" style="margin-left: 45px;">营业执照照片：
                                </div>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item style="float:left;display: block" prop="orgFilePath">
                                    <input type="file" id="uploadImage" @change="orgPath">
                                </el-form-item>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>
                            <el-col :span="10">
                                <div class="grid-content bg-purple">
                                    <span class="el-upload__tip"> (图片格式支持jpg，png，bmp,大小不得超过800*800)</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content bg-purple" style="margin-left: 60px;">法人证件：
                                </div>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item style="float:left;display: block" prop="legalIdPath">
                                    <input type="file" id="uploadImage1" @change="legalIdPath">
                                </el-form-item>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>

                            <el-col :span="10">
                                <div class="grid-content bg-purple">
                                    <span class="el-upload__tip"> (图片格式支持jpg，png，bmp,大小不得超过800*800)</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content bg-purple" style="margin-left: 40px;">联系人身份证：
                                </div>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item style="float:left;display: block" prop="contPath">
                                    <input type="file" id="uploadImage2" @change="contPath">
                                </el-form-item>
                            </el-col>
                            <el-col :span="1">
                                <div class="grid-content bg-purple">
                                    <span style="color:red;">*</span>
                                </div>
                            </el-col>

                            <el-col :span="10">
                                <div class="grid-content bg-purple">
                                    <span class="el-upload__tip"> (图片格式支持jpg，png，bmp,大小不得超过800*800)</span>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="18">
                                <h4 style="margin-left: 400px;color: #409EFF;cursor:pointer" @click="toggle">已提交？点击查看审核结果</h4>
                            </el-col>
                            <el-col :span="6">
                                <el-button style="padding: 12px 40px"
                                           type="primary" @click="onSubmit2()">确认
                                </el-button>
                            </el-col>
                        </el-row>

                    </el-form>
                    <div v-show="isShow">
                        <el-form style="border-radius: 4px" :model="queryOrg" :rules="rules" ref="queryOrg"
                                 class="demo-ruleForm">
                            <el-row>
                                <el-col :span="5">
                                    <div class="grid-content bg-purple">社会统一信用代码：
                                    </div>
                                </el-col>
                                <el-col :span="13">
                                <el-form-item>
                                    <el-input type="text" placeholder="请输社会统一信用代码" v-model="queryOrg.orgId2"
                                              style="align-items: right;display: inline-block;margin-top: 7px"/>
                                </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-button @click="onSubmit()"
                                    style="padding: 10px 30px;margin-right: 20px" type="primary">查询
                                    </el-button>
                                </el-col>
                            </el-row>
                        </el-form>
                            <el-table
                                    :cell-style="cellStyle"
                                    :header-cell-style="headerCellStyle"
                                    :data="tableData"
                                    border
                                    stripe
                                    style="width: 100%;">
                                <el-table-column
                                        prop="No"
                                        type="index"
                                        label="序号"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        prop="orgName"
                                        label="企业名称"
                                        width="319">
                                </el-table-column>
                                <el-table-column
                                        prop="updateTime"
                                        label="提交时间"
                                        width="200">
                                </el-table-column>
                                <el-table-column
                                        prop="status"
                                        label="状态"
                                        width="100">
                                    <template slot-scope="scope">
                                        {{scope.row.status === '0' ? '未通过' : ''}}
                                        {{scope.row.status === '1' ? '待审核':''}}
                                        {{scope.row.status === '2' ? '通过' : ''}}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="remake"
                                        label="备注"
                                        width="200">
                                </el-table-column>
                            </el-table>
                    </div>
                </el-main>
            </el-container>
        </div>
    </div>
</template>

<script>
    import Header from "../../../components/Header";
    import {checkResults,refresh} from "../../../api/orgBaseMG"

    export default {
        components: {Header},
        name: "update-org",
        data() {
            return {
                tableData: [],
                isShow: false,
                labelPosition: 'left',

                ruleForm: {},
                queryOrg:{
                    orgId2:''
                },
                rules: {
                    username: [
                        {required: true, message: '请输入机构名称', trigger: 'blur'},
                        {min: 3, max: 15, message: '统一信用代码格式不正确', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入机构名称', trigger: 'blur'}
                    ],
                    passwordC: [
                        {required: true, message: '请输入法人姓名', trigger: 'blur'}
                    ],
                    contactName: [
                        {required: true, message: '请输入联系人姓名', trigger: 'blur'}
                    ],
                    orgAddr: [
                        {required: true, message: '请输入注册地址', trigger: 'blur'}
                    ],
                    contIdcard: [
                        {required: true, message: '请输入联系人身份证', trigger: 'blur'}
                    ],
                    mobile: [
                        {required: true, message: '请输入联系方式', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'},
                    ],
                    fax: [
                        {required: true, message: '请输入传真', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            onSubmit(){
              const _this = this;
                checkResults(_this.queryOrg.orgId2).then(
                  res=>{
                      console.log("prv_tableData=>",_this.tableData);
                      _this.tableData = [res.data];
                      console.log("post_tableData=>",_this.tableData);
                  }
              )
            },
            onSubmit2(){
                console.log("====进入确认====",this.ruleForm);
                refresh(this.ruleForm).then(res=>{
                    if (res.code === 200){
                        console.log("=======传入数组========");
                        console.log(this.ruleForm);
                        this.$router.push({name:"UpdateConfirm",params:{"ruleForm":this.ruleForm}})
                    }
                    return false;
                })
            },
            toggle:function(){
                this.isShow = !this.isShow;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const _this = this
                        this.$axios.post('/auth', this.ruleForm).then(res => {

                            console.log(res.data)
                            const jwt = res.headers['authorization']
                            const userInfo = res.data.data

                            // 把数据共享出去vuex
                            _this.$store.commit("SET_TOKEN", jwt)
                            _this.$store.commit("SET_USERINFO", userInfo)

                            // 获取
                            console.log(_this.$store.getters.getUser)

                            _this.$router.push("/blogs")
                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            //表格单元格样式设计 --wzr 20210418
            headerCellStyle() {
                return "text-align: center;background:rgb(242,242,242);color:rgb(140,138,140);padding: 2px 0";
            },

            cellStyle() {
                return "text-align: center;";
            },

            ruleFormInit() {
                console.log("this.$route.params.ruleForm",this.$route.params.ruleForm)
                if (this.$route.params.ruleForm != null) {
                    this.ruleForm = this.$route.params.ruleForm;
                }
            },

            orgPath: function (e) {
                console.log("调用开始==============>", e);
                let file = e.target.files[0];
                console.log("原始file==========>", file);
                const fd = new FormData();// 否则后端报错400
                fd.append('file', file);
                console.log("FormData后的file==============>", fd);
                const config = {headers: {'Content-Type': 'multipart/form-data'}};
                this.$axios.post('/api/v1/excel/uploadPic', fd, config
                ).then(res => {
                    console.log("res.data.data",res.data.data)
                    this.ruleForm.orgFilePath = res.data.data;
                });
            },
            legalIdPath: function (e) {
                console.log("调用开始==============>", e);
                let file = e.target.files[0];
                console.log("原始file==========>", file);
                const fd = new FormData();// 否则后端报错400
                fd.append('file', file);
                console.log("FormData后的file==============>", fd);
                const config = {headers: {'Content-Type': 'multipart/form-data'}};
                this.$axios.post('/api/v1/excel/uploadPic', fd, config
                ).then(res => {
                    this.ruleForm.legalIdPath = res.data.data;
                });
            },
            contPath: function (e) {
                console.log("调用开始==============>", e);
                let file = e.target.files[0];
                console.log("原始file==========>", file);
                const fd = new FormData();// 否则后端报错400
                fd.append('file', file);
                console.log("FormData后的file==============>", fd);
                const config = {headers: {'Content-Type': 'multipart/form-data'}};
                this.$axios.post('/api/v1/excel/uploadPic', fd, config
                ).then(res => {
                    this.ruleForm.contPath = res.data.data;
                });
            },
        },
        created() {
            this.ruleFormInit();
        }
    }
    export const validater = {

        /**
         * 校验 包括中文字、英文字母、数字和下划线
         * 登录账号校验
         */
        validateAccount(rule, value, callback) {
            let acount = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/
            if (value && (!(acount).test(value))) {
                callback(new Error('账号不符合规范'))
            } else {
                callback()
            }
        },
        /**
         * 手机号码校验,注意：手机号码会随着社会的发展，衍生多种方式，请根据实际情况来，谢谢。
         * 原来：[1][34578]\d{9}      现在调整：[1][345789]\d{9}
         */
        mobile(rule, value, callback) {
            if (value && (!(/^[1][345789]\d{9}$/).test(value) || !(/^[1-9]\d*$/).test(value) || value.length !== 11)) {
                callback(new Error('手机号码不符合规范'))
            } else {
                callback()
            }
        }
    }
</script>

<style scoped>

    .el-header {
        background-color: #FFFFFF;
        color: #333;
        text-align: left;
        line-height: 60px;
    }

    .el-main {
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        font-size: 14px;
        line-height: 50px;
    }

    .demo-ruleForm {
        width: 770px;
        margin: 0 auto;
    }

    a {
        text-decoration: none;
        font-size: 14px;
        width: auto;
    }

    .el-table td,.el-table th {
        text-align: center !important;
    }

</style>